<template>
  <div ref="lineChartRef" style="width: 70vw; height: 400px"></div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref } from "vue";
import * as echarts from "echarts";
import { ElCard } from "element-plus";

export default defineComponent({
  components: {
    ElCard
  },
  setup() {
    const lineChartRef = ref<HTMLDivElement | null>(null);

    onMounted(() => {
      if (lineChartRef.value) {
        const myChart = echarts.init(lineChartRef.value);
        const option = {
          xAxis: {
            type: "category",
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
          },
          yAxis: {
            type: "value"
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: "line"
            },
            {
              data: [80, 92, 901, 934, 190, 130, 100],
              type: "line"
            }
          ]
        };

        myChart.setOption(option);
      }
    });

    return {
      lineChartRef
    };
  }
});
</script>
